<template>
  <div class="quote-text" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="quote-text__container quote-text--normal container-content" :style="{ background: modelValue?.data?.bgColor || 'transparent' }">
      <div v-if="modelValue?.data?.hasLine" class="quote-text__line"></div> 
      <div class="quote-text__content" v-html="modelValue?.data?.text"></div> 
      <div class="quote-text__desc" v-html="modelValue?.data?.desc"></div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup> 
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'

// 定义组件名称
defineOptions({
  name: 'QuoteText'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'QuoteText',
    data: {
      width: '',
      bgColor: '',
      hasLine: true,
      text: '浙江桐乡特色高中将于今年9月成立！',
      desc: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。'
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()
</script>

<style lang="scss" scoped>
.quote-text {
  position: relative;
}

.quote-text__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-text--large .quote-text__line {
  margin-bottom: 19px;
}

@media (max-width: 767.98px) {
  .quote-text--large .quote-text__line {
    margin-bottom: 12px;
  }
}

.quote-text--large .quote-text__content,
.quote-text--large .quote-text__desc {
  color: #0032a0;
  color: var(--text-color--primary, #0032a0);
}

@media (max-width: 767.98px) {
  .quote-text--large .quote-text__content,
  .quote-text--large .quote-text__desc {
    color: #0032a0;
    color: var(--text-color--primary, #0032a0);
  }
}

.quote-text__line {
  width: 2px;
  height: 24px;
  background-color: #0048e8;
  background-color: var(--quote-line-color, #0048e8);
  margin-bottom: 32px;
}

@media (max-width: 1023.98px) {
  .quote-text__line {
    margin-bottom: 24px;
  }
}

@media (max-width: 767.98px) {
  .quote-text__line {
    width: 1px;
    height: 20px;
    margin-bottom: 12px;
  }
}

.quote-text__content {
  color: #151f8c;
  color: var(--quote-text-color, #151f8c);
}
</style>